<template>
  <el-drawer
    :title="drawerTitle"
    :visible.sync="drawer"
    direction="rtl"
    size="800px"
    :before-close="handleClose"
  >
    <el-form
      v-model="form"
      :rules="rules"
      ref="roleForm"
      class="m-4"
      v-loading="loading"
      label-width="120px"
    >
      <div class="grid grid-cols-2 items-center">
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="form.role_name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button :label="1">启用</el-radio-button>
            <el-radio-button :label="2">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </div>

      <el-form-item label="角色描述" prop="role_memo">
        <el-input
          v-model="form.role_memo"
          type="textarea"
          placeholder="请输入用户描述"
        />
      </el-form-item>

      <el-form-item label="菜单权限" prop="menuArr">
        <tree-transfer
          filter
          checkStrictlyType="authorization"
          placeholder="请输入关键字搜索"
          :from_data="allMenuList"
          :to_data="form.menuArr"
          :defaultProps="replaceFile"
          :title="['全部菜单', '已选中菜单']"
          @addBtn="addMenu"
          @removeBtn="removeMenu"
        >
        </tree-transfer>
      </el-form-item>

      <el-form-item label="操作权限" prop="permissionArr">
        <tree-transfer
          filter
          placeholder="请输入关键字搜索"
          :from_data="allPermissionList"
          :to_data="form.permissionArr"
          :defaultProps="replaceFile"
          :title="['全部权限', '已选中权限']"
        ></tree-transfer>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import treeTransfer from "el-tree-transfer";
import { getPermission, getMenu } from "@/api/config/role";

const DRAWER_TITLE = {
  ADD: "新增权限",
  EDIT: "编辑权限"
};

const rules = {
  role_name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  role_memo: [
    { max: 200, message: "长度最多200个字符", trigger: "blur", required: false }
  ],
  status: [{ required: true, message: "请选择角色状态", trigger: "change" }]
};

const replaceFile = {
  // label(data) {
  //   const {menu_id, menu_name} = data
  //   return `${menu_name}/${menu_id}`
  // }
  label: "menu_name"
};

export default {
  components: { treeTransfer },
  data() {
    return {
      drawer: false,
      loading: false,
      replaceFile,
      drawerTitle: DRAWER_TITLE.ADD,
      rules,

      // 所有菜单权限
      allMenuList: [],
      // 所有操作权限
      allPermissionList: [],

      form: {
        id: undefined,
        role_name: "",
        role_memo: "",
        status: 1,
        menuArr: [],
        permissionArr: []
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      try {
        this.loading = true;
        const [allMenu, allPermission] = await Promise.all([
          getMenu(),
          getPermission()
        ]);

        this.allMenuList = allMenu.data;
        this.allPermissionList = allPermission.data;
      } catch (e) {
        this.$message.error("获取权限失败");
      } finally {
        this.loading = false;
      }
    },

    handleClose(done) {
      done();
    },

    show(record) {
      if (record) {
        const { id } = record;
        this.drawerTitle = DRAWER_TITLE.EDIT;
        this.form.id = record;
      } else {
        this.drawerTitle = DRAWER_TITLE.ADD;
      }

      this.drawer = true;
    },
    addMenu(fromData, toData, obj) {
      // console.log(fromData,toData,obj)
    },
    removeMenu(fromData, toData, obj) {
      // console.log(fromData,toData,obj)
    }
  }
};
</script>

<style scoped>
::v-deep .el-loading-spinner {
  left: 50% !important;
}
</style>
